<!-- 
  provide() 与 inject()


  provide()
    语法：
      provide(key, value)

  inject()
    语法：
      const value = inject(key, default)

 -->

<template>
  <div>
    <h1>Provide 与 Inject</h1>
    <p>{{ count }}</p>

    <Hello />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Hello from './components/Hello.vue'

export default {
  components: {
    Hello
  },

  setup() {
    const count = ref(1)

    function increment() {
      count.value++
    }

    provide('key1', 'value1')
    provide('key2', 'value2')
    provide('key5', count)
    provide('fn1', increment)

    return {
      count
    }
  }
}
</script>
